div {
  position: absolute;
  bottom: 50%; left: 50%;
}
$bar-w: 1.25em;
$bar-h: 5 * $bar-w;

.bar {
  width: $bar-w; height: $bar-h;
  background: currentColor;
  animation: bar 3s cubic-bezier(.81, .04, .4, .7) infinite;
}
$n: 10;

@for $i from 0 to $n {
  .bar:nth-child(#{$i + 1}) {
    margin-left: ($i - .5 * $n) * $bar-w;
    animation-delay: $i*50ms;
  }
}
$c: #63a6c1 #1e3f57; // 1st = light 2nd = dark

@for $i from 0 to $n {
  // list of mix() arguments for current bar
  $args: append($c, $i * 100% / ($n - 1));

  .bar:nth-child(#{$i + 1}) {
    background: mix($args...);
  }
}

$loader-w: $n * $bar-w;

.loader {
  width: $loader-w;
  height: $bar-h;
  //box-shadow: 0 0 0 1px red;
  margin-left: -.5 * $loader-w;
  -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(255,255,255,1),rgba(#fff, .7));
  //-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent ,rgba(255,255,255,.3));
  perspective: 62.5em;
}
.bar { bottom: 0; }
@keyframes bar {
  0% {
    transform: rotate(-.5turn) rotateX(-1turn);
  }
  75%, 100% { transform: none; }
}
